<template>
	<section>
		<section class="filter-bar mb-16">
			<span class="ml-10 label">子渠道商简称：</span>
			<a-input class="w-190" v-model="name" :max-length="35" placeholder="请输入子渠道商简称" @pressEnter="search()"
				allow-clear />
			<a-button class="ml-18" type="primary" @click="search">查询</a-button>
			<a-button class="ml-8" @click="reset">重置</a-button>
		</section>
		<a-table class="table-con" row-key="id" :loading="loading" :columns="columns" :data-source="data"
			:pagination="pagination">

			<template #operate="val,data">
				<div>
					<a href="javascript:" @click="getEdit(data,'详细')">详细</a>
					<a href="javascript:" class="ml-10 mr-10" @click="getEdit(data,'编辑')">编辑</a>
					<a style="color: red;" href="javascript:" @click="geDelect(data)">删除</a>
				</div>
				<!-- <a-tooltip :title="val">
          <span class="overflow" style="display:block;max-width:240px;">{{ val }}</span>
        </a-tooltip> -->
			</template>
		</a-table>
		<a-modal :maskClosable="false" :title="newTitle" :width="450" :visible="showModal"
			:confirm-loading="confirmLoading" :ok-type="'primary'" @ok="confirmOk" @cancel="cancel"
			:footer="showDisabled==true?undefined:null">
			<a-form :form="form">
				<a-row :gutter="[24,0]">
					<a-col :span="24">
						<a-form-item class="mb-15" label="子渠道编码" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input :disabled="!showDisabled" placeholder="请输入子渠道编码" :max-length="100" v-decorator="[
               'code',
               { rules: [{ required: showDisabled, message: '请输入子渠道编码', }] },
             ]"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item class="mb-15" label="子渠道简称" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input :disabled="!showDisabled" placeholder="请输入子渠道简称" :max-length="100" v-decorator="[
             'name',
             { rules: [{ required: showDisabled, message: '请输入子渠道简称', }] },
           ]"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24,0]" v-if="!showDisabled">
					<a-col :span="24">
						<a-form-item class="mb-15" label="创建人" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input :disabled="true" placeholder="请输入创建人" :max-length="100" v-decorator="[
				    'createByName',
				    { rules: [{ required: false, message: '请输入创建人',  }] },
				  ]"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item class="mb-15" label="创建时间" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input :disabled="true" placeholder="请输入创建时间" :max-length="100" v-decorator="[
				  'createTime',
				  { rules: [{ required: false, message: '请输入子创建时间',}] },
				]"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item class="mb-15" label="修改人" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input :disabled="true" placeholder="请输入修改人" :max-length="100" v-decorator="[
					    'updateByName',
					    { rules: [{ required: false, message: '请输入修改人',  }] },
					  ]"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item class="mb-15" label="修改时间" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input :disabled="true" placeholder="请输入修改时间" :max-length="100" v-decorator="[
					  'updateTime',
					  { rules: [{ required: false, message: '请输入修改时间', }] },
					]"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</a-modal>
	</section>
</template>
<script>
	import {
		tableMixins
	} from '@/utils/mixins'
	import {
		getPageChannelBillList,
		addChannelBill,getSubAdd,getSubEdit,getSubDelete,getSubList,getSubDetail
	} from '@/api/operationInfo/channel'

	export default {
		name: 'channelWaterlist',
		mixins: [tableMixins],
		props: {
			id: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				labelCol: {
					span: 8
				},
				showFooter: undefined,
				name:undefined,
				wrapperCol: {
					span: 16
				},
				showDisabled:true,
				showModal: false,
				confirmLoading: false,
				form: this.$form.createForm(this),
				loading: false,
				customerName: undefined,
				pageNum: 1,
				rowsNum: 10,
				newTitle:'新建子渠道',
				columns: [

					{
						dataIndex: 'code',
						align: 'center',
						title: '子渠道编码',
						scopedSlots: {
							customRender: 'code'
						}
					},
					{
						dataIndex: 'name',
						align: 'center',
						
						title: '子渠道商简称'
					},
					{
						dataIndex: 'operate',
						align: 'center',
						title: '操作',
						scopedSlots: {
							customRender: 'operate'
						}
					}
				],
				data: [],
			
				time: undefined,
				times: undefined,
				type: undefined,
				dataNew:{},
				
			}
		},
		created() {
			this.getData()
		
		},
		methods: {
			geDelect(data){
				this.$confirm({
				  title: '提示',
				  content: '请确认是否删除当前子渠道商吗？',
				  okText: '确定',
				  okType: 'danger',
				  cancelText: '取消',
				  onOk: () => {
				    this.loading = true
				    getSubDelete({ id: data.id})
				      .then(() => {
				        this.loading = false
				     
				     this.$message.success('删除成功')
					 this.$emit('upload')
					 this.getData()
					 this.cancel()
				      })
				      .finally(() => (this.loading = false))
				  },
				})
			},
		
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						const {
							id
						} = this
						let url=this.dataNew.id?getSubEdit:getSubAdd
						url({
							channelId: id,
							id:this.dataNew.id?this.dataNew.id:undefined,
							...this.$utils.trimValue(values),
						}).then(() => {
							this.$message.success('新建成功！')
							this.$emit('upload')
							this.getData()
							this.cancel()
						})
					}
				})
			},
					// 
			//新建流水
			createWater() {
					this.newTitle="新建子渠道"
				this.showModal = true
				this.showDisabled=true
			},
			getTime(e, stringTime) {
				this.time = e
				this.times = stringTime
			},
			search() {
				this.pageNum = 1
				this.getData()
			},
			reset() {
				
				this.name = undefined
			
				this.search()
			},
			async getEdit(data,name){
				this.dataNew=undefined
				if(name=='详细'){
					this.newTitle="详情"
					this.showDisabled=false
				}else{
						this.newTitle="编辑子渠道"
					this.showDisabled=true
				}
				this.dataNew=data
					this.showModal = true
				const {
					id,
				} = this
				let res=await getSubDetail({
					id:data.id
				})
			
				this.form.setFieldsValue(res)
			},
			getData() {
				this.loading = true
				const {
					rowsNum,
					pageNum,
					id,
					name
					
				} = this
				getSubList({
					channelId: id,
					rowsNum,
					pageNum,
					name: name ? name : undefined,
					
				}).then(res => {
					const {
						items,
						rowCount
					} = res
					this.data = items
					this.total = rowCount
				}).finally(() => {
					this.loading = false
				})
			},
			cancel() {
				this.confirmLoading = false
				this.form.resetFields()
				this.showModal = false
			}
		}
	}
</script>
<style lang="less" scoped>
	.table-con {

		/deep/ .ant-table-thead>tr>th,
		/deep/ .ant-table-tbody>tr>td {
			padding: 8px;
		}
	}
</style>